<template>
  <a-modal :open="open" width="800px" centered title="选择参保险种" @ok="onOk" @cancel="onCancel">
    <div class="py-4">
      <div class="flex items-center mb-2">
        <a-avatar :size="48" :src="avatarMan" />
        <div class="flex flex-wrap w-full ml-2">
          <div class="!w-1/3 font-bold">
            <span class="mr-2"> {{ data.brName || '姓名' }}</span>
            <span class="mr-2">{{ data.brXb || '性别' }}</span>
            <span class="mr-2">{{ data.brAge || '年龄' }}</span>
          </div>
          <LabelValue label="民族" class="!w-1/3" :value="data.brMz" />
          <LabelValue label="出生日期" class="!w-1/3" :value="data.brBtd" />
          <LabelValue label="人员编号" class="!w-1/3" :value="data.psn_no" />
          <LabelValue label="证件类型" class="!w-1/3" :value="data.psn_cert_typeName" />
          <LabelValue label="证件号码" class="!w-1/3" :value="data.brSfz" />
        </div>
      </div>
      <a-divider dashed class="my-4" />
      <div class="font-bold">请选择一项参保</div>
      <BaseList :data-source="data.insuinfo" :loading="loading" class="w-full">
        <template #renderItem="{ item }">
          <div class="flex flex-wrap w-full p-2" :class="{ 'select-active': selectedItem.insutype === item.insutype }" @click="onSelect(item)">
            <div class="font-bold !w-1/5">{{ item.insutypeName }}</div>
            <LabelValue label="参保日期" value-class="font-bold" class="!w-1/5" :value="item.psn_insu_date" />
            <LabelValue label="暂停日期" value-class="font-bold" class="!w-1/5" :value="item.paus_insu_date" />
            <LabelValue label="状态" value-class="font-bold" class="!w-1/5" :value="item.psn_insu_stas === '1' ? '有效' : '失效'" />
            <LabelValue label="余额" value-class="font-bold" class="!w-1/5" :value="item.balc.toString()" />
            <LabelValue label="人员类别" value-class="font-bold" class="!w-1/5 mt-2" :value="item.psn_typeName" />
            <LabelValue label="参保地划分" value-class="font-bold" class="!w-1/5 mt-2" :value="item.insuplc_admdvs" />
            <LabelValue label="公务员标志" value-class="font-bold" class="!w-1/5 mt-2" :value="item.cvlserv_flagName" />
            <LabelValue label="单位" value-class="font-bold" class="!w-2/5 mt-2" :value="item.emp_name" />
          </div>
        </template>
      </BaseList>
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import avatarMan from '@/assets/images/avatar-man.png'

defineProps({
  open: Boolean,
  data: {
    type: Object,
    default: () => ({})
  }
})
const selectedItem = ref({})
const emit = defineEmits(['update:open', 'ok'])
const onCancel = () => {
  emit('update:open', false)
}
const onSelect = (row) => {
  selectedItem.value = row
}
const onOk = () => {
  emit('ok', selectedItem.value)
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.select-active {
  color: var(--primary-color);
  background: var(--secondary-color) !important;
  border: 1px solid var(--primary-color) !important;
}
</style>
